/* With centered search and secondary links */

/* as TailwindUI Dropdown - https://tailwindui.com/components/application-ui/elements/dropdowns */

@reference "../src/main.css";

.p-menubar .p-menuitem-link {
  @apply text-gray-900 px-4 py-2 select-none focus:outline-none;
}

.p-menubar .p-submenu-list {
  @apply mt-2 py-1 rounded-md shadow-lg bg-white w-56 ring-1 ring-black ring-black/50 focus:outline-none;
}

.p-menubar .p-menuitem-link:not(.p-disabled):hover {
  @apply bg-gray-50 text-gray-900;
}

/* PrimeVue doesn't set router-link-active for parent */
.p-menubar .router-link-active {
  @apply bg-gray-100;
}

.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
  @apply text-gray-900 hover:bg-gray-50 hover:text-gray-900;
  @apply rounded-md py-2 px-3 font-medium;
}

.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-menuitem-active > .p-menuitem-link {
  @apply bg-gray-100 text-gray-900;
}

/* trigger icon to open */
.p-menubar .p-menubar-root-list .p-submenu-icon {
  @apply ml-2 text-gray-400;
}
